<template lang="pug">
  .container
    div.table-empty
      s-table(
        ref="table"
        :reqUrl="`web/classes/${isMy ? 'my_list' : 'list'}`"
        :column="tableObj.column"
        :filterProps="{fields: tableObj.filterItems}"
        :queryPropsParams="{areaId: curArea.areaId}"
        :row-style="rowStyle"
      )
        .table-operator(slot="table-operator")
          el-button.gradientVertical(size="large" @click="infoRoute()" round) 新增
        template(slot="name" slot-scope="text, scope")
          el-tag(:type="scope.category | colorFilter" size="mini" class="mr5" effect="plain") {{dictFilter(scope.category, 'classCategory')}}
          | {{text}}
        template(slot="beginMonth" slot-scope="text, scope") {{text}} ~ {{scope.endMonth}}
        template(slot="action" slot-scope="text, scope")
          template(v-if="isMy")
            el-link(@click="infoRoute(scope.id, true)" type="primary") 查看
          template(v-else)
            el-link(@click="infoRoute(scope.id)" type="success") 修改
            el-popconfirm(
              :title="`此操作将${scope.deleted ? '启用' : '禁用'}班级, 是否继续??`"
              @confirm="() => onToggleClass(scope.id, scope.deleted)"
              @onConfirm="() => onToggleClass(scope.id, scope.deleted)"
            )
              el-link(
                slot="reference"
                :loading="toggleLoading"
                :type="scope.deleted ? 'success' : 'danger'"
              )
                | {{scope.deleted ? '启用' : '禁用'}}
    add-drawer(:visible.sync="modalObj.visible" :id="modalObj.id" :disabled="modalObj.disabled" @getList="() => refreshTable(true)")
</template>
<script>
import dictMixin from '@/mixins/dict'
import { mapGetters } from 'vuex'
import AddDrawer from './add'
import { seachConfig, columnConfig } from './config'
import { toggleClass } from './api'

export default {
  components: {
    AddDrawer
  },
  filters: {
    colorFilter (value) {
      return value === 1 ? 'success' : ''
    }
  },
  mixins: [dictMixin],
  data () {
    return {
      toggleLoading: false,
      tableObj: {
        column: columnConfig,
        filterItems: seachConfig
      },
      modalObj: {
        visible: false,
        disabled: false,
        id: ''
      }
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    isMy () {
      return this.$route.path === '/teachManage/classes/myClass'
    }
  },
  created () {
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    rowStyle ({ row }) {
      if (row.deleted) {
        return {
          color: '#dcdcdc'
        }
      }
    },
    // 状态切换
    onToggleClass (classesId, flag) {
      this.toggleLoading = true
      toggleClass({ classesId }, flag).then(res => {
        if (res) {
          this.refreshTable()
        }
      }).finally(() => {
        this.toggleLoading = false
      })
    },
    // 详情和新增跳转
    infoRoute (id = '', disabled = false) {
      this.modalObj = {
        visible: true,
        id,
        disabled
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  padding: 30px;
  background: #FFFFFF;
}
</style>
